<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
    <link href="/static/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bk.css" rel="stylesheet">
</head>
<body>
     <div class="king-block king-block-bordered">
    <div class="king-block-header king-gray-light">
        <h3 class="king-block-title">综合示例</h3>
    </div>
    <div class="king-block-content">
      <table id="table2_demo4" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>名称</th>
            <th>职位</th>
            <th>工资</th>
            <th>开始时间</th>
            <th>位置</th>
            <th>分机号</th>
            <th>操作</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <script src="/static/js/jquery-2.1.1.min.js"> </script>
  <script src="/static/js/bootstrap.min.js"> </script>
  <script src="/static/js/jquery.dataTables.min.js"> </script>
  <script src="/static/js/dataTables.bootstrap.min.js"> </script>
  <!-- csv -->
  <script src="/static/js/buttons.html5.min.js"> </script>
  <!-- excel -->
  <script src="/static/js/jszip.min.js"> </script>
  <script type="text/javascript">
  $(function () {
    //table2_demo4_js_start
    //表格(DataTables)-4，综合示例
    var language = {
      search: '搜索：',
      lengthMenu: "每页显示 _MENU_ 记录",
      zeroRecords: "没找到相应的数据！",
      info: "分页 _PAGE_ / _PAGES_",
      infoEmpty: "暂无数据！",
      infoFiltered: "(从 _MAX_ 条数据中搜索)",
      paginate: {
        first: '首页',
        last: '尾页',
        previous: '上一页',
        next: '下一页',
      }
    }
    $("#table2_demo4").dataTable({
        autoWidth: false,
        lengthChange: true, //不允许用户改变表格每页显示的记录数
        pageLength : 5, //每页显示几条数据
        lengthMenu: [5, 10, 20], //每页显示选项
        pagingType: 'full_numbers',
        ajax : './data.json',
        ordering: true,
        columns : [
          {data:"name",orderable: false},
          {data:"position"},
          {data:"salary"},
          {data:"start_date"},
          {data:"office"},
          {data:"extn"},
          {
            data:null,
            orderable:false,
            render : function(data, type, row, meta){
                return '<a class="king-btn king-default del">删除</a>';
            }
          }
        ],
        language:language
    });
 
    var t = $("#table2_demo4").DataTable();//获取datatables对象
    //删除按钮绑定事件
    $("#table2_demo4 tbody").on('click', 'a.del', function(){
        var row = t.row( $(this).parents('tr') ),//获取按钮所在的行
          data = row.data();
        if(confirm('确定要删除'+data.name+' ?')){
          row.remove().draw();
        }
 
    });
    //table2_demo4_js_end
  });
</script>
</body>
</html>